在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一个状态机,对于特定地输入,它总返回一致的输出。
一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。
实例化
当组件在客户端被实例化,第一次被创建时,以下方法依次被调用:
- getDefaultProps 设置属性的默认值。 es6对应 deftaultProps
- getInitialState 用来初始化每个实例的state。 es6 对应 constructor函数中的this.state
- componentWillMount 渲染前
- render 渲染
- componentDidMount 渲染后
当组件在服务端被实例化,首次被创建时,以下方法依次被调用:
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
componentDidMount 不会在服务端被渲染的过程中调用。
getDefaultProps
对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops 将不会再被调用,其返回的对象可以用于设置默认的 props(properties的缩写) 值。
getInitialState
对于组件的每个实例来说,这个方法的调用有且只有一次,用来初始化每个实例的 state,在这个方法里,可以访问组件的 props。每一个React组件都有自己的 state,其与 props 的区别在于 state只存在组件的内部,props 在所有实例中共享。
getInitialState 和 getDefaultPops 的调用是有区别的,getDefaultPops 是对于组件类来说只调用一次,后续该类的应用都不会被调用,而 getInitialState 是对于每个组件实例来讲都会调用,并且只调一次。
每次修改 state,都会重新渲染组件,实例化后通过 state 更新组件,会依次调用下列方法:
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate
但是不要直接修改 this.state,要通过 this.setState 方法来修改。
componentWillMount
该方法在首次渲染之前调用,也是再 render 方法调用之前修改 state 的最后一次机会。
render
该方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。render方法需要满足下面几点:
- 只能通过 this.props 和 this.state 访问数据(不能修改)
- 可以返回 null,false 或者任何React组件
- 只能出现一个顶级组件,不能返回一组元素
- 不能改变组件的状态
- 不能修改DOM的输出
render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。
componentDidMount
该方法不会在服务端被渲染的过程中调用。该方法被调用时,已经渲染出真实的 DOM,可以在该方法中通过 this.refs 访问到真实的 DOM。
class App extends Component {
static defaultProps = {
name:"默认值"
}
constructor(props) {
super(props);
this.state = {
num : 0
};
this.addNum = this.addNum.bind(this);
}
addNum(e) {
e.preventDefault();
var num = ++this.state.num;
this.setState({
num:num
})
}
componentWillMount() {
this.setState({
num:10
})
}
render() {
return (
<div className="App">
<div className="App-header" ref="header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React{this.props.name}</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={this.addNum}>{this.state.num}</button>
</div>
);
}
componentDidMount() {
console.log(this.refs.header)
}
}
需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。
存在期
此时组件已经渲染好并且用户可以与它进行交互,比如鼠标点击,手指点按,或者其它的一些事件,导致应用状态的改变,你将会看到下面的方法依次被调用
- componentWillReceiveProps props在父组件改变时执行
- shouldComponentUpdate 如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回 false 来阻止组件的重新渲染,返回 `false 则不会执行 render 以及后面的 componentWillUpdate,componentDidUpdate 方法
- componentWillUpdate 这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者 state 即将进行重新渲染前,componentWillUpdate(object nextProps, object nextState) 会被调用,注意不要在此方面里再去更新 props 或者 state。
- render
- componentDidUpdate 这个方法和 <kdb>componentDidMount</kdb> 类似,在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。
销毁时
componentWillUnmount
每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。
当再次装载组件时,以下方法会被依次调用:
1、getInitialState
2、componentWillMount
3、render
4、componentDidMount
createClass和ES6的不同
ES6 class
static propTypes
static defaultProps
constructor (this.state)对应createClass
propTypes
getDefaultProps
getInitialState
整体流程
ES6 class
static propTypes props值的类型检查 static defaultProps 设置属性的默认值
constructor ( this.state ) 初始化每个实例的statecomponentWillMount 该方法在首次渲染之前调用,也是再 render 方法调用之前修改 state 的最后一次机会。
componentDidMount 该方法被调用时,已经渲染出真实的 DOM,可以在该方法中通过 this.refs 访问到真实的
DOM。componentWillUnmount 每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时会被执行
componentWillReceiveProps props在父组件改变时执行 shouldComponentUpdate
如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回 false 来阻止组件的重新渲染,返回
`false 则不会执行 render 以及后面的 componentWillUpdate,componentDidUpdate 方法componentWillUpdate 这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者
state 即将进行重新渲染前, componentDidUpdate 这个方法和
<kdb>componentDidMount</kdb> 类似,在组件重新被渲染之后,会被调用。可以在这里访问并修改 DOM。 render
渲染组件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。